<template>
	<view class="lighting-container">
		<!-- 房间选择区域 -->
		<view class="room-section">
			<text class="room-label">房间</text>
			<scroll-view class="room-scroll" scroll-x="true">
				<view class="room-list">
					<view 
						class="room-item" 
						:class="{ active: selectedRoom === room.id }"
						v-for="room in roomList" 
						:key="room.id"
						@click="selectRoom(room.id)"
					>
						<text>{{ room.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 设备列表区域 -->
		<view class="devices-section">
			<view class="room-devices" v-for="room in filteredRooms" :key="room.id">
				<text class="room-title">{{ room.name }}</text>
				<view class="devices-list">
					<view 
						class="device-item" 
						v-for="device in room.devices" 
						:key="device.id"
					>
						<view class="device-icon" :class="device.iconClass">
							<text class="icon-symbol">{{ device.icon }}</text>
						</view>
						<view class="device-info">
							<text class="device-name">{{ device.name }}</text>
							<text class="device-status" :class="device.isOn ? 'on' : 'off'">
								{{ device.isOn ? '已开启' : '已关闭' }}
							</text>
						</view>
						<view class="device-switch">
							<switch 
								:checked="device.isOn" 
								@change="toggleDevice(device)"
								:color="device.isOn ? '#3CC45F' : '#CCCCCC'"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中的房间ID
				selectedRoom: 'all',
				// 房间列表数据
				roomList: [
					{ id: 'all', name: '全部' },
					{ id: 'living', name: '客厅' },
					{ id: 'master', name: '主卧' },
					{ id: 'second', name: '次卧' },
					{ id: 'study', name: '书房' }
				],
				// 设备数据
				devicesData: [
					{
						id: 'living',
						name: '客厅',
						devices: [
							{
								id: 'living_main',
								name: '客厅主灯',
								icon: '💡',
								iconClass: 'lighting-icon',
								isOn: true
							},
							{
								id: 'living_tv',
								name: '电视背景灯带',
								icon: '🌈',
								iconClass: 'strip-icon',
								isOn: true
							}
						]
					},
					{
						id: 'master',
						name: '主卧',
						devices: [
							{
								id: 'master_bedside',
								name: '床头灯',
								icon: '🛏️',
								iconClass: 'bedside-icon',
								isOn: true
							},
							{
								id: 'master_ceiling',
								name: '吸顶灯',
								icon: '💡',
								iconClass: 'lighting-icon',
								isOn: false
							}
						]
					}
				]
			}
		},
		
		computed: {
			/**
			 * 根据选中房间过滤设备数据
			 */
			filteredRooms() {
				if (this.selectedRoom === 'all') {
					return this.devicesData
				}
				return this.devicesData.filter(room => room.id === this.selectedRoom)
			}
		},
		
		onLoad() {
			// 页面加载时的初始化逻辑
			console.log('智能照明页面加载')
		},
		
		methods: {
			/**
			 * 选择房间
			 * @param {String} roomId 房间ID
			 */
			selectRoom(roomId) {
				this.selectedRoom = roomId
				console.log('选择房间:', roomId)
			},
			
			/**
			 * 切换设备开关状态
			 * @param {Object} device 设备对象
			 */
			toggleDevice(device) {
				// 更新设备状态
				device.isOn = !device.isOn
				
				// 显示操作反馈
				uni.showToast({
					title: `${device.name}已${device.isOn ? '开启' : '关闭'}`,
					icon: 'success',
					duration: 1500
				})
				
				// 这里应该调用实际的设备控制API
				this.controlDevice(device)
			},
			
			/**
			 * 控制设备
			 * @param {Object} device 设备对象
			 */
			controlDevice(device) {
				// 模拟API调用
				console.log('控制设备:', device)
				
				// 实际项目中应该调用后端API
				// uni.request({
				//   url: getApp().globalData.apiPath + '/device/control',
				//   method: 'POST',
				//   data: {
				//     deviceId: device.id,
				//     action: device.isOn ? 'on' : 'off'
				//   },
				//   success: (res) => {
				//     console.log('设备控制成功:', res)
				//   },
				//   fail: (err) => {
				//     console.error('设备控制失败:', err)
				//     // 回滚状态
				//     device.isOn = !device.isOn
				//   }
				// })
			}
		}
	}
</script>

<style scoped>
	.lighting-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	/* 房间选择区域 */
	.room-section {
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.room-label {
		display: block;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.room-scroll {
		width: 100%;
		white-space: nowrap;
	}
	
	.room-list {
		display: flex;
		gap: 20rpx;
	}
	
	.room-item {
		display: inline-block;
		padding: 16rpx 32rpx;
		background-color: #f8f8f8;
		border-radius: 50rpx;
		font-size: 28rpx;
		color: #666666;
		white-space: nowrap;
		/* transition: all 0.3s ease; */
	}
	
	.room-item.active {
		background-color: #E3F2FD;
		color: #1976D2;
	}
	
	/* 设备列表区域 */
	.devices-section {
		padding: 30rpx;
	}
	
	.room-devices {
		margin-bottom: 40rpx;
	}
	
	.room-title {
		display: block;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.devices-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.device-item {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.device-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
	}
	
	.lighting-icon {
		background-color: #E3F2FD;
	}
	
	.strip-icon {
		background-color: #F3E5F5;
	}
	
	.bedside-icon {
		background-color: #FFF3E0;
	}
	
	.icon-symbol {
		font-size: 40rpx;
	}
	
	.device-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.device-name {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	
	.device-status {
		font-size: 24rpx;
	}
	
	.device-status.on {
		color: #3CC45F;
	}
	
	.device-status.off {
		color: #999999;
	}
	
	.device-switch {
		margin-left: 20rpx;
	}
</style>
